<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core"
      >
<h:head>
        <title>Wallet King - Login</title>
        <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                if(typeof(args) != "undefined"){
	                if(!args.validationFailed ) {  
	                    jQuery('#dialog').effect("shake", { times:3 }, 100);  
	                }
	            }
                blockUILogin.unblock();
            }  
        </script>
        <h:outputStylesheet name="css/style.css" library="default" />
		<h:outputScript name="js/sitescript.js" library="default" />
</h:head>

<h:body onload="dlg.show()">
	<p:growl id="growl" />
	
	<p:dialog id="dialog" header="Login" widgetVar="dlg" onHide="dlg.show()" draggable="false" resizable="false" closable="false">
		<h:form id="form">
				<p:focus />
				<h:panelGrid columns="2" cellpadding="5" id="loginPanel">
					<h:outputLabel for="username" value="Username:" />
					<p:inputText id="username" value="#{secureUser.username}" required="true" label="username"  />
	
					<h:outputLabel for="password" value="Password:" />
					<p:password id="password" value="#{secureUser.password}" required="true" label="password" />
	
					<p:commandButton id="loginButton" value="Login" update=":growl"
							action="#{secureUser.login}"
							onstart="blockUILogin.block();"
							oncomplete="handleLoginRequest(xhr, status, args);" 
							disabled="#{param['locked'] eq 'true'}"
							/>
				</h:panelGrid>
				
				<h:outputText value="Session expired! Please re-login" rendered="#{param['expired'] eq 'true'}"  />
				<h:outputText value="Your account is locked!"  rendered="#{param['locked'] eq 'true'}"  />
				
				<pe:blockUI target="loginPanel" widgetVar="blockUILogin">
					LOADING<br />
					<p:graphicImage library="default" name="img/ajax-loader.gif"/>
				</pe:blockUI>
		</h:form>		
	</p:dialog>

</h:body>
</html>